<header class="mb-4">
  <h2 class="crayons-subtitle-1 mb-1 flex items-center">
    <%= crayons_icon_tag("mod-filled", title: t("views.admin.users.overview.tag_mod.icon"), aria_hidden: true, class: "mr-2") %>
    <%= t("views.admin.users.overview.tag_mod.subtitle") %>
  </h2>
  <p class="color-secondary">
    <%= t("views.admin.users.overview.tag_mod.desc") %>
    <a href="https://admin.forem.com/docs/managing-your-community/tag-moderator-features" rel="noopener noreferer" target="_blank" class="c-link c-link--branded" aria-label="<%= t("views.admin.users.overview.tag_mod.aria_learn") %>"><%= t("views.admin.users.overview.learn") %></a>
  </p>
</header>

<% moderated_tags = @user.roles.select(&:tag_moderator?) %>

<% if moderated_tags.any? %>
  <ul class="flex flex-wrap gap-2 mb-4">
    <% moderated_tags.each do |role| %>
      <li>
        <% if policy(role).remove_role? %>
          <% confirm_dialog = if role.super_admin?
                                t("views.admin.users.overview.roles.remove_confirm_super_admin")
                              else
                                t("views.admin.users.overview.roles.remove_confirm")
                              end %>
          <%= button_to url_for(action: :destroy, user_id: @user.id, role_id: role.id, resource_type: role.resource_type, resource_id: role.resource_id),
                                method: :delete, data: { confirm: confirm_dialog }, class: "c-pill c-pill--action-icon" do %>

            <span class="screen-reader-only"><%= t("views.admin.users.overview.tag_mod.remove") %></span>
            #<%= role.resource_name.to_s %>

            <%= crayons_icon_tag(:x, class: "c-pill__action-icon", aria_hidden: true, width: 18, height: 18) %>
          <% end %>
        <% else %>
          <button
            class="c-pill c-pill--description-icon crayons-tooltip__activator cursor-help"
            type="button"
            aria-disabled="true">
            <%= crayons_icon_tag(:lock, class: "c-pill__description-icon", aria_hidden: true, width: 18, height: 18) %>
            #<%= role.resource_name.to_s %>
            <span data-testid="tooltip" class="crayons-tooltip__content"><%= t("views.admin.users.overview.roles.locked") %></span>
          </button>
        <% end %>
      </li>
    <% end %>
  </ul>
<% end %>
<%= form_with url: add_tag_mod_role_admin_user_path(@user.id), scope: :user, method: :post, local: true, html: { class: "" } do |f| %>
  <div class="crayons-field w-50 my-4">
    <%= f.text_field :tag_name, placeholder: "One tag name", size: 50, required: true, class: "crayons-textfield w-auto mr-3", autocomplete: "off" %>
    <%= f.submit "Create tag mod role", class: "crayons-btn" %>
  </div>
<% end %>

<div id="tag-moderation-description" class="crayons-notice crayons-notice--warning mt-4">
  <%= t("views.admin.users.overview.tag_mod.notice_html", tag_page: link_to(t("views.admin.users.overview.tag_mod.tag_page"),
                                                                            admin_tags_path, class: "c-link c-link--branded"), username: tag.strong(@user.username)) %>
</div>
